<template>
  <view v-if="shenheStatus == 0">
    <view class="order" v-for="item in orderList" :key="item.id">
      <!-- 商家信息 -->
      <view class="top">
        <view class="left">
          <u-icon
            :name="item.store.logo"
            :size="30"
            color="rgb(94,94,94)"
          ></u-icon>
          <view class="store">{{ item.store.name }}</view>
        </view>
        <view class="store_admin">
          {{ item.store.admin.name }}
        </view>
      </view>

      <!-- 订单商品只有一个 -->
      <view>
        <view>
          <view class="left order_goods">
            <image :src="item.store.logo" mode="aspectFill"></image>
            <view class="right flex1">
              <view class="order_no">
                {{ $t('home.orderNo') }}：{{ item.order_no }}
              </view>
              <view class="title text-more-2">
                {{ item.desc }}
              </view>
              <view class="number text-more">{{ $t('goods.number') }}：1</view>
              <view class="price">
                <view>
                  ￥
                  <text class="large">{{ item.total_price }}</text>
                </view>
                <view class="created_at">
                  {{ item.created_at }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      orderList: [],
      page: 1,
    };
  },
  onReachBottom() {
    this.page++;
    this.getData();
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$allrequest.agency.renew({ page: this.page }).then(res => {
        if (res.code === 0) {
          this.orderList = res.data;
        }
      });
    },
  },
};
</script>

<style scoped>
page,
html {
  padding: 30rpx;
  background: #f2f2f2;
}
.left {
  display: flex;
}
.order {
  background: #fff;
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order .top .left .store {
  margin: 0 5px;
  font-size: 16px;
  font-weight: bold;
}
.order_goods {
  margin-top: 20rpx;
  display: grid;
  grid-template-columns: 1fr 2.7fr;
}
.order_goods image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 8rpx;
}
.order_no {
  font-size: 13px;
  font-weight: bold;
}
.title {
  color: #4c4c4c;
  font-size: 13px;
  height: 52rpx;
  font-weight: 600;
}
.number {
  font-size: 12px;
  font-weight: 600;
}
.price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.created_at,
.store_admin {
  font-size: 12px;
  font-weight: 600;
}
</style>
